<template>
  <div class="product_variant_list">
    <el-table size="mini" :data="product.prodVariants">
      <el-table-column label="产品名称" prop="name"/>
      <el-table-column label="价格" prop="price"/>
      <el-table-column label="状态">
        <template slot-scope="scope">{{scope.row.status==='ONLINE'?'已上架':'已下架'}}</template>
      </el-table-column>
      <el-table-column label="季度付费">
        <template slot-scope="scope">{{scope.row.creditStrategy==='SEASON'?'是':'否'}}</template>
      </el-table-column>
      <el-table-column label="客户积分">
        <template
          slot-scope="scope"
        >{{scope.row.ccType==='FIXED'?scope.row.customerCredit:`${scope.row.customerCredit}%`}}</template>
      </el-table-column>
      <el-table-column label="业务员积分">
        <template
          slot-scope="scope"
        >{{scope.row.ecType==='FIXED'?scope.row.employeeCredit:`${scope.row.employeeCredit}%`}}</template>
      </el-table-column>
      <el-table-column label="操作栏">
        <template slot-scope="scope">
          <span
            class="t-link"
            @click="setProductSaleStatus(scope.row)"
          >{{scope.row.status==='ONLINE'?'下架':'上架'}}</span>
          <span class="t-link" @click="modify(scope.row)">修改</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import ajax from '@/api/ajax';

export default {
  name: 'product-variant-list',
  props: ['product'],
  data() {
    return {}
  },
  methods: {
    // 设置上下架
    setProductSaleStatus(variant) {
      let statusText = variant.status === 'ONLINE' ? '下架' : '上架';
      let status = variant.status === 'ONLINE' ? 'OFFLINE' : 'ONLINE';
      this.alertInfo({
        title: variant.name,
        text: `你确定要${statusText}该产品吗？`,
        type: 'question'
      }).then(result => {
        if (!result) return
        if (result && result.dismiss) return
        let url = `/api/product/variant/${variant.prodId}/rack`
        ajax.put(url, { status: status }).then(resp => {
          let result = resp.data
          this.handleOpSuccess(result)
          this.$emit('refresh', this.product.name)
        })
      })
    },
    modify(variant) {
      this.$emit('modify', {
        product: this.product,
        variant: variant
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
